<template>
	<s-layout title="用户列表" :bgStyle="{
		color:'#F6F6F6'
	}">
		<!-- 搜索 -->
		<view class="search-box ss-flex justify-center align-center" :style="{
      top: sheep.$platform.device.statusBarHeight + 44 + 'px',
    }">
			<view class="search ss-flex justify-start align-center ss-p-x-20">
				<uni-icons type="search" size="30" color="#767676"></uni-icons>
				<input class="ss-m-l-15" type="text" v-model="state.search" placeholder="搜索好友"
					placeholder-style="font-size:30rpx;color:#767676;" confirm-type="search" @confirm="confirm">
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		<!-- 用户列表 -->
		<view class="item-box ss-flex justify-between align-center" v-for="(item,index) in state.list" :key="index"
			@click="handleCall(item)">
			<view class="item ss-flex justify-start align-center ss-font-32">
				<image class="item-image" :src="cdn(item.avatar)" :style="{background:item.avatar ? '' : '#D8D8D8'}">
				</image>
				<view>{{item.nickname}}</view>
			</view>
		</view>
		<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
							    contentdown: '点击或上拉加载更多',
	}" @tap="loadmore" />
		<s-empty v-if="state.total <= 0 && state.loadStatus === 'noMore'"
			icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无数据"></s-empty>
	</s-layout>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		cdn,
		udid
	} from '@/im/config/index.js'
	import $store from '@/im/store/im';

	const userInfo = computed(() => $store().userInfo);
	const state = reactive({
		list: [],
		search: '',
		page: 1,
		total: 1,
		loadStatus: ''
	})


	onLoad((options) => {
		if (options) {
			state.search = options.search
			getList()
		}
	})

	onReachBottom(() => {
		loadmore()
	})

	const handleCall = (item) => {
		$store().getFriendInfo(`C2C${item.im_id}`, 'newUser')
	}

	const confirm = (e) => {
		if (e.detail.value.length <= 0) {
			return
		}
		state.page = 1
		state.list = []
		state.total = 1
		getList()
	}

	const loadmore = () => {
		if (state.loadStatus !== 'noMore') {
			state.page++
			getList()
		}
	}

	const getList = () => {
		state.loadStatus = 'loading'
		uni.request({
			url: 'https://im-beta.shisan-xi.work/api/settings/getThirdImUserList',
			method: 'GET',
			data: {
				page: state.page,
				keyword: state.search,
				mobile: userInfo.value.userID
			},
			success: (res) => {
				let {
					code,
					data
				} = res.data
				if (code === 0) {
					state.list = state.list.concat(data.data)
					state.total = data.total
					if (state.list.length === 0) {
						state.total = 0
						state.loadStatus = 'noMore';
					}
					if (data.current_page < data.last_page) {
						state.loadStatus = 'more';
					} else {
						state.loadStatus = 'noMore';
					}
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.search-box {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #F1F1F1;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;

		.search {
			width: 706rpx;
			height: 70rpx;
			border-radius: 40rpx;
			background: #E2E2E2;

			input {
				width: 100%;
			}
		}
	}

	.item-box {
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #F1F1F1;
		padding: 0 22rpx;

		.item {
			height: 130rpx;
			color: #3D3D3D;
		}

		.item-image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.btn-apply {
			width: 100rpx;
			height: 50rpx;
			border-radius: 10rpx;
			background: #1AAD19;
			font-size: 24rpx;
			line-height: 50rpx;
			text-align: center;
			color: #FFFFFF;
		}

		.btn-text {
			color: #3D3D3D;
		}
	}

	.tips {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 22rpx;
	}
</style>